$(document).ready(function () {
    $.get("type/showType", function (rs) {
        var types = rs.result;
        for (var i = 0; i < types.length; i++) {
            $("<li class='layui-nav-item'>" +
                "<a href='caty.html?tid=" + types[i].tid + "'>" + types[i].typeName +
                "</a></li>").appendTo("#type");
        }
    });

    $.get("blog/showBy", function (rs) {
        forblog(rs);
    });

    $.get("blog/showByDesc", function (rs) {
        var blogs = rs.result;
        for (var i = 0; i < blogs.length; i++) {
            $("<tr>" +
                "<td><a href='detail.html?bid=" + blogs[i].blogid + "&type=" + blogs[i].typeName + "'>" + blogs[i].title + "</a></td>" +
                "</tr>").appendTo("#desc");
        }
    });

    $.get("blog/showByStatus", {"status": 1}, function (rs) {
        var blogs = rs.result;
        $.get("type/showType", function (rs) {
            var types = rs.result;
            for (var i = 0; i < types.length; i++) {
                if (blogs[0].tid == types[i].tid) {
                    $("<div class=\"subject\"><b>[置顶]</b><a href='detail.html?bid=" + blogs[0].blogid + "&type=" + types[i].typeName + "'" +
                        " title='" + blogs[0].blogid + "'>" + blogs[0].title + "</a><em>" + blogs[0].posttime + "发布</em></div>" +
                        "<div class='content'>" + blogs[0].detail + "</div>").appendTo("#status1");
                }
            }
        });

    });

});
//1显示分页的样式
function showPage(rs) {
    $("#pages").empty();
    var indexPage = rs.page.indexPage;
    var countPage = rs.page.countPage;
    $("<input type='button' id='b1' value='上一页' name='" + (indexPage - 1) + "'/>").appendTo("#pages");
    for (var i = 1; i <= countPage; i++) {
        if (i == indexPage) {
            $("<input type='button' name='page' value='" + i + "' style='background-color: aqua' height='100px' width='100px'/>").appendTo("#pages");
        } else {
            $("<input type='button' name='page' value='" + i + "' style='background-color: gainsboro' height='100px' width='100px'/>").appendTo("#pages");
        }
    }
    $("<input type='button' id='b1' class='" + (countPage+1) + "' value='下一页' name='" + (indexPage + 1) + "'/>").appendTo("#pages");
}
//2分页中点击对应页数显示的数据
$(document).on("click", "[name='page']", function () {
    var indexPage = $(this).val();
    $.get("blog/showBy", {
        "indexPage": indexPage
    }, function (rs) {
        forblog(rs);
    });
});
//3分页中点击下一页或上一页所显示的数据
$(document).on("click", "#b1", function () {
    var indexPage = $(this).attr("name");
    var countpage = $(this).attr("class");

    if (indexPage == 0) {
        alert("已是第一页");
    } else if (indexPage == countpage) {
        alert("已是最后一页");
    } else {
        $.get("blog/showBy", {
            "indexPage": indexPage
        }, function (rs) {
            forblog(rs);
        });
    }
});

function forblog(rs) {
    $("#status").empty();
    var blogs = rs.result;
    for (var i = 0; i < blogs.length; i++) {
        $("<div class=\"layui-col-md12 margin20\"></div>" +
            "                <div class=\"layui-col-md12\">" +
            "                    <div class=\"main list\">" +
            "                        <div id='typeTitle" + i + "' class=\"subject\"></div>" +
            "                        <div class=\"content layui-row\">" +
            "                            <div class=\"layui-col-md4 list-img\">" +
            "                                <a href=\"javascript:;\"><img src=\"./static/images/list_img.png\"></a>" +
            "                            </div>" +
            "                            <div class=\"layui-col-md8\">" +
            "                                <div id='text" + i + "' class=\"list-text\"></div>" +
            "                                <div class=\"list-stat layui-row\">" +
            "                                    <div class=\"layui-col-xs3 layui-col-md3 Label\">" +
            "                                        <i id=\"typeName" + i + "\" class=\"layui-icon layui-icon-note\"></i>" +
            "                                    </div>" +
            "                                    <div class=\"layui-col-xs3 layui-col-md3\">" +
            "                                        <i id=\"time" + i + "\" class=\"layui-icon layui-icon-read\"></i>" +
            "                                    </div>" +
            "                                    <div id=\"detail" + i + "\" class=\"layui-col-xs3 layui-col-md3 alink\">" +
            "                                        <a href='detail.html?bid=" + blogs[i].blogid + "&type=" + blogs[i].typeName + "' class=\"layui-btn layui-btn-xs\">阅读原文</a>" +
            "                                    </div>" +
            "                                </div>" +
            "                            </div>" +
            "                        </div>" +
            "                    </div>" +
            "                </div>").appendTo("#status");
        $("<a href='caty.html?type=" + blogs[i].typeName + "' class='caty'>[" + blogs[i].typeName + "]</a><a href='detail.html?bid=" + blogs[i].blogid + "&type=" + blogs[i].typeName + "'" +
            "title='" + blogs[i].title + "'>" + blogs[i].title + "</a><em>" + blogs[i].posttime + "发布</em>").appendTo("#typeTitle" + i + "");
        $("<p></p>").text(blogs[i].detail).appendTo("#text" + i + "");
        $("#typeName" + i + "").append("<a href='caty.html?type=" + blogs[i].typeName + "'>" + blogs[i].typeName + "</a>");
        $("#time" + i + "").append("<em>" + blogs[i].clicknumber + "次阅读</em>");
    }
    showPage(rs);
}